import { ReactNode } from 'react';
import { Link, useLocation } from 'react-router-dom';
import { cn } from '@/lib/utils';
import { useGameStore } from '@/store/game-store';
import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
import { Progress } from '@/components/ui/progress';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { 
  Home, 
  Zap, 
  Sword, 
  Package, 
  ScrollText, 
  Users, 
  Settings,
  Coins
} from 'lucide-react';

interface LayoutProps {
  children: ReactNode;
}

const navigationItems = [
  { path: '/', label: '主页', icon: Home },
  { path: '/cultivation', label: '修炼', icon: Zap },
  { path: '/battle', label: '战斗', icon: Sword },
  { path: '/inventory', label: '背包', icon: Package },
  { path: '/quest', label: '任务', icon: ScrollText },
  { path: '/social', label: '社交', icon: Users },
  { path: '/admin', label: '管理', icon: Settings },
];

export function Layout({ children }: LayoutProps) {
  const location = useLocation();
  const { player, gold } = useGameStore();

  const healthPercentage = (player.health / player.maxHealth) * 100;
  const manaPercentage = (player.mana / player.maxMana) * 100;
  const expPercentage = player.realm.requiredExp > 0 
    ? (player.experience / player.realm.requiredExp) * 100 
    : 100;

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900">
      {/* 顶部导航栏 */}
      <header className="sticky top-0 z-50 border-b border-slate-700 bg-slate-900/95 backdrop-blur supports-[backdrop-filter]:bg-slate-900/60">
        <div className="container mx-auto px-4 py-3">
          <div className="flex items-center justify-between">
            {/* 左侧：角色信息 */}
            <div className="flex items-center space-x-4">
              <Avatar className="h-12 w-12 border-2 border-amber-500">
                <AvatarImage src={player.avatar} alt={player.name} />
                <AvatarFallback className="bg-amber-500 text-slate-900 font-bold">
                  {player.name.charAt(0)}
                </AvatarFallback>
              </Avatar>
              
              <div className="space-y-1">
                <div className="flex items-center space-x-2">
                  <h2 className="text-lg font-bold text-amber-400">{player.name}</h2>
                  <span className="text-sm text-slate-400">Lv.{player.level}</span>
                </div>
                <div className="text-sm text-amber-300">{player.realm.name}</div>
              </div>
            </div>

            {/* 中间：导航菜单 */}
            <nav className="hidden md:flex items-center space-x-1">
              {navigationItems.map((item) => {
                const Icon = item.icon;
                const isActive = location.pathname === item.path;
                
                return (
                  <Button
                    key={item.path}
                    asChild
                    variant={isActive ? "default" : "ghost"}
                    size="sm"
                    className={cn(
                      "text-slate-300 hover:text-amber-400 hover:bg-slate-800",
                      isActive && "bg-amber-600 text-slate-900 hover:bg-amber-500"
                    )}
                  >
                    <Link to={item.path} className="flex items-center space-x-2">
                      <Icon className="h-4 w-4" />
                      <span>{item.label}</span>
                    </Link>
                  </Button>
                );
              })}
            </nav>

            {/* 右侧：金币 */}
            <div className="flex items-center space-x-2 text-amber-400">
              <Coins className="h-5 w-5" />
              <span className="font-bold">{gold.toLocaleString()}</span>
            </div>
          </div>

          {/* 状态条 */}
          <div className="mt-3 grid grid-cols-3 gap-4">
            <div className="space-y-1">
              <div className="flex justify-between text-xs">
                <span className="text-red-400">生命值</span>
                <span className="text-slate-400">{player.health}/{player.maxHealth}</span>
              </div>
              <Progress value={healthPercentage} className="h-2 bg-slate-700">
                <div 
                  className="h-full bg-red-500 transition-all duration-300 rounded-full"
                  style={{ width: `${healthPercentage}%` }}
                />
              </Progress>
            </div>

            <div className="space-y-1">
              <div className="flex justify-between text-xs">
                <span className="text-blue-400">灵力值</span>
                <span className="text-slate-400">{player.mana}/{player.maxMana}</span>
              </div>
              <Progress value={manaPercentage} className="h-2 bg-slate-700">
                <div 
                  className="h-full bg-blue-500 transition-all duration-300 rounded-full"
                  style={{ width: `${manaPercentage}%` }}
                />
              </Progress>
            </div>

            <div className="space-y-1">
              <div className="flex justify-between text-xs">
                <span className="text-amber-400">修为</span>
                <span className="text-slate-400">{player.experience}/{player.realm.requiredExp || '∞'}</span>
              </div>
              <Progress value={expPercentage} className="h-2 bg-slate-700">
                <div 
                  className="h-full bg-amber-500 transition-all duration-300 rounded-full"
                  style={{ width: `${expPercentage}%` }}
                />
              </Progress>
            </div>
          </div>
        </div>
      </header>

      {/* 主内容区域 */}
      <main className="container mx-auto px-4 py-6">
        {children}
      </main>

      {/* 移动端底部导航 */}
      <nav className="md:hidden fixed bottom-0 left-0 right-0 bg-slate-900/95 backdrop-blur border-t border-slate-700">
        <div className="grid grid-cols-4 gap-1 p-2">
          {navigationItems.slice(0, 4).map((item) => {
            const Icon = item.icon;
            const isActive = location.pathname === item.path;
            
            return (
              <Button
                key={item.path}
                asChild
                variant="ghost"
                size="sm"
                className={cn(
                  "flex-col h-auto py-2 text-slate-400 hover:text-amber-400",
                  isActive && "text-amber-400 bg-slate-800"
                )}
              >
                <Link to={item.path}>
                  <Icon className="h-5 w-5 mb-1" />
                  <span className="text-xs">{item.label}</span>
                </Link>
              </Button>
            );
          })}
        </div>
      </nav>

      {/* 移动端底部间距 */}
      <div className="md:hidden h-20" />
    </div>
  );
}